<template>
	<view class="page" :style="{'padding-top':mt+'px'}">
		<c-nav-bar :title="detailTitle" ></c-nav-bar>
		<!-- <u-navbar title="导游详情" :autoBack="true" :leftIconSize="36" bgColor="transparent"
			leftIconColor="#000" ></u-navbar> -->
		<view class="header">
			<view class="top">
				<view class="left">
					<image style="width: 148rpx;
		height:148rpx;" :src="guideInfo.logoUrl" mode="aspectFill">
					</image>
				</view>
				<view class="right">
					<view class="name">
						<text>{{guideInfo.name}}</text>
						<text class="point">{{guideInfo.serveScore}}分</text>
					</view>
					<view class="vertical">
						<image src="https://i.ringzle.com/file/20231101/a9f3ddcd02fe4c89ba2bbb67fec13c18.png"
							mode="aspectFit" style="width: 230rpx;
				height: 40rpx;">
							<text>已实名 证件齐全</text>
						</image>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="bottom_1">
					<text>{{guideInfo.serveNum}}</text>
					<text>总服务数</text>
				</view>
				<view class="bottom_1">
					<text>{{guideInfo.cmtGoodNum}}</text>
					<text>好评数</text>
				</view>
				<view class="bottom_1">
					<text>{{guideInfo.enterTime}}年</text>
					<text>入驻时长</text>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="title">
				服务路线
			</view>
			<view class="list_item" v-for="item,index in routeList" :key="index">
				<view class="left">
					<view class="left_title">
						{{item.name}}
					</view>
					<view class="left_detail">
						{{item.planDesc}}
					</view>
					<u-toast ref="uToast"></u-toast>
					<view class="price">
						<text>￥{{item.serveAmount}}/天</text>
						<text>起</text>
					</view>
				</view>
				<u-modal @confirm='()=>{
			this.planDescShow=false
		}' @close='()=>{
			this.planDescShow=false
		}' :closeOnClickOverlay="true" :show="planDescShow" title="详情" :content='planDescContent'></u-modal>
				<view class="right">
					<u-button size='normal' shape='circle' color="#007A69"
						@click="book(item)">立即预订</u-button>
				</view>
			</view>
		</view>
		<view class="operation">
			<u-button size='large' shape='circle' color="#007A69"
				@click="phoneShow=true">电话咨询</u-button>
		</view>
		<u-popup :show="phoneShow" @close="close" mode="bottom" :round="70">
			<view class="phoneCall">
				<text>拨打电话</text>
				<text @click="phoneCall()">{{guideInfo.phone}}</text>
				<text @click="phoneShow=false">取消</text>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import customNavBar from '@/compoments/uNavBar'
	export default {
		components: {
			customNavBar
		},
		data() {
			return {
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				detailTitle:'导游详情',
				planDescShow: false,
				// routeList: [{
				// 	title: '嵊泗县A线讲解',
				// 	price: 499,
				// 	detail: 'A线：花鸟岛+东海五渔村+六合朝阳+妈祖庙 + 渔民画体验',
				// }, {
				// 	title: '嵊泗县B线讲解',
				// 	price: 499,
				// 	detail: 'A线：花鸟岛+东海五渔村+六合朝阳+妈祖庙 + 渔民画体验',
				// }, {
				// 	title: '嵊泗县C线讲解',
				// 	price: 499,
				// 	detail: 'A线：花鸟岛+东海五渔村+六合朝阳+妈祖庙 + 渔民画体验',
				// }, {
				// 	title: '嵊泗县D线讲解',
				// 	price: 499,
				// 	detail: 'A线：花鸟岛+东海五渔村+六合朝阳+妈祖庙 + 渔民画体验',
				// }, ],
				routeList: [],
				phoneShow: false,
				guideInfo: {},
				planDescContent: ''
			}
		},
		onLoad(option) {
			if (option) {
				this.getGuideDetail(option.id)
				this.getGuideInfo(option.id)
			}
		},
		methods: {
			planDescShowMeth(params) {
				this.planDescShow = true
				this.planDescContent = params
			},
			getGuideDetail(id) {
				this.$api.get('/api/guide/selectPageByGuide', {
					guideId: id
				}).then(res => {
					if (res.data.msg == 'success') {
						this.routeList = res.data.data.list
					} else {
						uni.showToast({
							title: res.data.msg
						})
					}
				})
			},
			phoneColse() {
				this.phoneShow = false
			},

			getGuideInfo(id) {
				this.$api.get('/api/guide/selectDetail/' + id).then(res => {
					if (res.data.msg == 'success') {
						this.guideInfo = res.data.data
						this.guideInfo.serveScore.toFixed(1)

					} else {
						uni.showToast({
							title: res.data.msg
						})
					}
				})
			},
			close() {
				this.phoneShow = false
			},
			phoneCall() {
				uni.makePhoneCall({
					phoneNumber: this.guideInfo.phone
				})
			},
			book(item) {
				item.guideName = this.guideInfo.name
				item.guideId = this.guideInfo.id
				const params = encodeURIComponent(JSON.stringify(item))
				uni.navigateTo({
					url: 'orderWrite?item=' + params
				})
			},
			returnBack() {
				uni.reLaunch({
					url: '/pages/index/guide/index'
				})
			},
			showMore(params) {
				this.$refs.uToast.show({
					message: params,
				})
			}
		}
	}
</script>

<style lang="scss">
	.page {
		// padding-top: 150rpx;
	}

	.phoneCall {
		display: flex;
		flex-direction: column;
		height: 336rpx;
		background: #F5F7F8;

		text:nth-child(1) {
			border-bottom: 1rpx solid #EFEFEF;
			color: #999999;
		}

		text:nth-child(2) {
			font-size: 29rpx;
			font-weight: 400;
			color: #01B9F9;
			margin-bottom: 30rpx;
		}

		text:nth-child(3) {
			height: 100%;
		}

		&>text {
			background: #FFFFFF;
			height: 95rpx;
			text-align: center;
			width: 100%;
			line-height: 95rpx;
		}
	}

	.header {
		padding: 20rpx 20rpx 0;
		
		height: 464rpx;
		background: url('https://i.ringzle.com/file/20231101/1ab5c5ca048041ca82e072ae2234080a.png') center no-repeat;
		display: flex;
		justify-content: flex-end;
		flex-direction: column;

		.top {
			display: flex;
			padding: 20rpx;

			.left {
				&>image {
					border-radius: 70rpx;
				}
			}

			.right {
				width: 500rpx;
				margin-left: 25rpx;
				font-size: 30rpx;
				color: #111111;
				display: flex;
				align-items: flex-start;
				justify-content: space-evenly;
				flex-direction: column;

				.name {
					display: flex;
					width: 100%;
					justify-content: space-between;
					padding-right: 40rpx;

					text:nth-child(1) {
						font-size: 30rpx;
						font-weight: bold;
					}

					.point {
						width: 70rpx;
						font-size: 28rpx;
						color: #FF4141;
						line-height: 28rpx;
					}
				}

			}

			.vertical {
				position: relative;

				text:nth-child(2) {
					position: absolute;
					color: #FFFFFF;
					font-size: 24rpx;
					width: fit-content;
					left: 42rpx;
					top: 2px;
				}
			}
		}

		.bottom {
			width: 100%;
			background: #fff;
			border-radius: 12rpx;
			display: flex;
			height: 152rpx;
			flex-direction: row;
			justify-content: space-evenly;
			align-items: center;
			margin-top: 20rpx;

			&_1 {
				display: flex;
				flex-direction: column;
				height: 80rpx;
				justify-content: space-between;
				text-align: center;

				text:nth-child(1) {
					font-size: 30rpx;
					font-weight: bold;
				}

				text:nth-child(2) {
					color: #808080;
				}
			}
		}

	}

	.list {
		padding: 20rpx 20rpx 0;

		height: 1624rpx;
		background: #F5F8FA;

		.title {
			margin: 20rpx 20rpx;
			font-size: 32rpx;
			font-weight: bold;
		}

		&_item {
			width: 100%;
			background: #fff;
			height: 238rpx;
			border-radius: 12rpx;
			padding: 20rpx;
			display: flex;
			// border-bottom: 1rpx solid #b9b9b9;
			box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;

			.left {
				display: flex;
				justify-content: space-evenly;
				flex-direction: column;
				width: 74%;
				height: 100%;

				&_title {
					font-size: 30rpx;
					font-weight: bold;
				}

				&_detail {
					color: #808080;
					white-space: normal;
					display: -webkit-box;
					/* 将元素视为弹性盒子 */
					-webkit-line-clamp: 2;
					/* 限制文本显示的行数为2行 */
					-webkit-box-orient: vertical;
					/* 设置盒子的排列方向为垂直方向 */
					overflow: hidden;
					/* 隐藏溢出的文本 */
					text-overflow: ellipsis;
					/* 使用省略号代替溢出的文本 */
				}

				.price {
					text:nth-child(1) {
						color: #FF4141;
						font-size: 30rpx;
					}

					text:nth-child(2) {
						color: #808080;
					}
				}
			}

			.right {
				align-items: flex-end;
				display: flex;

				.u-button[data-v-2bf0e569] {
					height: 31px;

				}
			}

		}
	}

	.phone {
		width: 610rpx;
		height: 600rpx;
		background: #FFFFFF;
		border-radius: 35rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;

		image {
			width: 158rpx;
			height: 158rpx;
		}

		view:nth-child(1) {
			color: #808080;
		}

		view:nth-child(2) {
			font-size: 32rpx;
		}

		.btn {
			display: flex;
			flex-direction: row;
			width: 100%;

			&_1 {
				width: 35%;
				height: 37px;
				border-radius: 8px;

			}
		}
	}

	.operation {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		height: 112rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 10;
		box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.06);
		font-size: 28rpx;
	}

	/deep/.u-button--large {
		height: 40px !important;
		width: 90% !important;
	}

	/deep/.u-popup__content {
		border-radius: 35rpx;
	}
</style>